
<template>
	<view class="bg-gray1" style="min-height: 100vh;">
		<cu-custom :bgColor="'bg-'+theme.backgroundColor" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">我的收藏</block>
		</cu-custom>		
		<view class="cu-list goods-list">
			<navigator class="goods-item bg-white margin-top-sm" hover-class="none" 
				:url="'/pages/goods/goods-detail/index?id=' + item.goodsSpu.id"
				:class="'cu-item ' + (modalName=='move-box-'+ index?'move-cur1':'')" v-for="(item, index) in userCollect" :key="index"
				@touchstart="ListTouchStartFun" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
				<view class="cu-avatar image-box" :style="'background-image:url(' + item.goodsSpu.picUrls[0] + ');'"></view>
				<view class="goods-detail">
					<view class="font-28 overflow-2 text-bold">{{item.goodsSpu.name}}</view>
					<view class="flex justify-between ">
						<view class="flex align-end text-bold text-red" v-if="item.goodsSkus && item.goodsSkus.length">
							<view>￥</view>
							<view class="text-xl">{{item.goodsSkus[0].salesPrice.toFixed(2)}}</view>
							<view v-if="item.goodsSkus[0].salesPrice < item.goodsSkus[0].marketPrice">
							   <text style="text-decoration:line-through;font-size: 22rpx;margin-left: 10rpx;" class="text-gray text-price">{{item.goodsSkus[0].marketPrice.toFixed(2)}}</text>
							</view>
						</view>
						<view class="cu-btn round shadow-blur check-details margin-right-sm" :class="'bg-'+theme.themeColor">查看详情</view>
					</view>
				</view>
				<view class="move" @click.stop style="top:0;width:200rpx">
					<view class="bg-red " @click.stop="userCollectDel(item,index)" :data-index="index">删除</view>
				</view>
			</navigator>			
		</view>
		<view :class="'cu-load bg-gray1 ' + (loadmore?'loading':'over')"></view>
	</view>
</template>

<script>

	const util = require("utils/util.js");
	const app = getApp();
	import api from 'utils/api'

	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				theme: app.globalData.theme, //全局颜色变量
				collectType: [{
					value: '商品',
					key: '1'
				}],
				tabCur: 0,
				page: {
					current: 1,
					size: 15,
				},
				parameter: {
					type: '1'
				},
				loadmore: true,
				userCollect: [],
				ListTouchStart: "",
				ListTouchDirection: "",
				modalName: ""
			};
		},

		components: {},
		props: {},

		onLoad(options) {
			
		},

		onShow(options) {
			app.initPage().then(res => {
				this.refresh();
			});
		},

		onReachBottom() {
			if (this.loadmore) {
				this.page.current = this.page.current + 1;
				this.userCollectPage();
			}
		},

		methods: {
			tabSelect(e) {
				let dataset = e.currentTarget.dataset;
				if (dataset.index != this.tabCur) {
					this.tabCur = dataset.index;
					this.parameter.type = dataset.key;
					this.refresh();
				}
			},
			refresh() {
				this.loadmore = true;
				this.userCollect = [];
				this.page.current = 1;
				this.userCollectPage();
			},
			userCollectPage() {
				api.userCollectPage(this.page).then(res => {
					let userCollect = res.data.records;
					this.userCollect = [...this.userCollect, ...userCollect];
					if (userCollect.length < this.page.size) {
						this.loadmore = false;
					}
				});
			},

			// ListTouch触摸开始
			ListTouchStartFun(e) {
				this.ListTouchStart = e.touches[0].pageX;
			},

			// ListTouch计算方向
			ListTouchMove(e) {
				this.ListTouchDirection = e.touches[0].pageX - this.ListTouchStart > 0 ? 'right' : 'left';
			},

			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.ListTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target;
					console.log(this.modalName,'this.modalName')
				} else {
					this.modalName = null;
				}
				this.ListTouchDirection = null;
			},

			userCollectDel(item,index) {
				uni.showModal({
					content: '确定删除收藏吗？',
					cancelText: '我再想想',
					confirmColor: '#ff0000',
					success:(res)=> {
						if (res.confirm) {
							api.userCollectDel({spuId: item.spuId}).then(res => {
								this.userCollect.splice(index, 1);
							});
						}
					}

				});
			}

		}
	};
</script>
<style>
	.collection-types {
		top: unset !important;
	}
	
	.goods-item{
		height: 260rpx !important;
		padding: 30rpx 20rpx;
		display: flex;
		justify-content: space-between;
		position: relative;
	}
	
	.store-item{
		height: 260rpx !important;
	}
	
	.image-box{
		width: 200rpx;
		height: 200rpx;
	}
	
	.goods-detail{
		width: 480rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.store-detail{
		width: 480rpx;
	}
	
	.cu-list>.move-cur1 {
		transform: translateX(-200rpx);
	}
</style>
